<template>
  <view class="course-detail">
    <view class="detail-header">
      <image class="detail-cover" :src="courseDetail.cover" mode="aspectFill" />
      <view class="header-overlay">
        <view class="back-btn" @click="goBack">←</view>
        <view class="share-btn" @click="shareCourse">📤</view>
      </view>
    </view>
    
    <view class="detail-content">
      <view class="course-info">
        <text class="course-title">{{ courseDetail.title }}</text>
        <view class="instructor-info">
          <image class="instructor-avatar" :src="courseDetail.instructorAvatar" mode="aspectFill" />
          <text class="instructor-name">{{ courseDetail.instructor }}</text>
        </view>
        <view class="course-stats">
          <text class="rating">⭐ {{ courseDetail.rating }}</text>
          <text class="students">{{ courseDetail.students }}人学习</text>
          <text class="duration">{{ courseDetail.duration }}</text>
        </view>
      </view>
      
      <view class="price-section">
        <view class="price-info">
          <text class="current-price">¥{{ courseDetail.price }}</text>
          <text class="original-price">¥{{ courseDetail.originalPrice }}</text>
        </view>
        <view class="action-buttons">
          <view class="like-btn" :class="{ liked: courseDetail.isLiked }" @click="toggleLike">
            ❤️ {{ courseDetail.likes }}
          </view>
          <view class="buy-btn" @click="buyCourse">
            立即购买
          </view>
        </view>
      </view>
      
      <view class="course-description">
        <text class="desc-title">课程介绍</text>
        <text class="desc-content">{{ courseDetail.description }}</text>
      </view>
      
      <view class="course-outline">
        <text class="outline-title">课程大纲</text>
        <view class="chapter-list">
          <view 
            v-for="(chapter, index) in courseDetail.chapters" 
            :key="index"
            class="chapter-item"
          >
            <text class="chapter-number">{{ index + 1 }}</text>
            <text class="chapter-title">{{ chapter.title }}</text>
            <text class="chapter-duration">{{ chapter.duration }}</text>
          </view>
        </view>
      </view>
      
      <view class="comments-section">
        <view class="comments-header">
          <text class="comments-title">学员评价 ({{ courseDetail.comments.length }})</text>
          <text class="add-comment" @click="showCommentModal = true">写评价</text>
        </view>
        <view class="comment-list">
          <view 
            v-for="comment in courseDetail.comments.slice(0, 3)" 
            :key="comment.id"
            class="comment-preview"
          >
            <image class="comment-avatar" :src="comment.avatar" mode="aspectFill" />
            <view class="comment-content">
              <text class="comment-user">{{ comment.username }}</text>
              <text class="comment-text">{{ comment.content }}</text>
              <text class="comment-time">{{ comment.time }}</text>
            </view>
          </view>
        </view>
        <text class="view-all-comments" @click="showCommentModal = true">
          查看全部评价 >
        </text>
      </view>
    </view>
    
    <comment-modal 
      :visible="showCommentModal" 
      @close="showCommentModal = false"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import CommentModal from '../components/CommentModal.vue'

const showCommentModal = ref(false)

// 假数据 - 课程详情
const courseDetail = ref({
  id: 1,
  title: 'Vue3 + TypeScript 完整实战教程',
  instructor: '张老师',
  instructorAvatar: 'https://via.placeholder.com/80x80/ff6b35/ffffff?text=张',
  cover: 'https://via.placeholder.com/750x400/ff6b35/ffffff?text=Vue3课程',
  price: 299,
  originalPrice: 399,
  rating: 4.8,
  students: 1234,
  duration: '12小时',
  likes: 156,
  isLiked: false,
  description: '本课程将带你从零开始学习Vue3和TypeScript，通过实际项目开发，掌握现代前端开发技能。课程内容包括Vue3新特性、TypeScript语法、组合式API、状态管理等核心知识点。',
  chapters: [
    { title: 'Vue3基础入门', duration: '45分钟' },
    { title: 'TypeScript语法详解', duration: '60分钟' },
    { title: '组合式API深入', duration: '50分钟' },
    { title: 'Vue Router路由管理', duration: '40分钟' },
    { title: 'Pinia状态管理', duration: '35分钟' },
    { title: '实战项目开发', duration: '180分钟' }
  ],
  comments: [
    {
      id: 1,
      username: '前端小白',
      avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=白',
      content: '老师讲得很详细，从基础到进阶都有涉及，很适合新手学习！',
      time: '2天前',
      rating: 5
    },
    {
      id: 2,
      username: '资深开发者',
      avatar: 'https://via.placeholder.com/60x60/ff6b35/ffffff?text=开',
      content: '内容很实用，项目案例贴近实际工作场景，推荐！',
      time: '1周前',
      rating: 5
    }
  ]
})

const goBack = () => {
  // 返回上一页逻辑
  uni.navigateBack()
}

const shareCourse = () => {
  uni.showToast({ title: '分享课程', icon: 'success' })
}

const toggleLike = () => {
  courseDetail.value.isLiked = !courseDetail.value.isLiked
  courseDetail.value.likes += courseDetail.value.isLiked ? 1 : -1
}

const buyCourse = () => {
  uni.showToast({ title: '跳转到支付页面', icon: 'none' })
}
</script>

<style scoped>
.course-detail {
  background: #fff;
}
.detail-header {
  position: relative;
  height: 400rpx;
}
.detail-cover {
  width: 100%;
  height: 100%;
}
.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 60rpx 30rpx 30rpx;
  background: linear-gradient(rgba(0,0,0,0.3), transparent);
}
.back-btn, .share-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
}
.detail-content {
  padding: 30rpx;
}
.course-info {
  margin-bottom: 30rpx;
}
.course-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  line-height: 1.4;
}
.instructor-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.instructor-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}
.instructor-name {
  font-size: 28rpx;
  color: #666;
}
.course-stats {
  display: flex;
  gap: 30rpx;
}
.rating, .students, .duration {
  font-size: 26rpx;
  color: #999;
}
.price-section {
  background: #f8f9fa;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}
.price-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 25rpx;
}
.current-price {
  font-size: 42rpx;
  color: #ff6b35;
  font-weight: bold;
}
.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}
.action-buttons {
  display: flex;
  gap: 20rpx;
}
.like-btn {
  background: rgba(255, 107, 53, 0.1);
  color: #ff6b35;
  padding: 20rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  border: 1px solid #ff6b35;
}
.like-btn.liked {
  background: #ff6b35;
  color: #fff;
}
.buy-btn {
  flex: 1;
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  color: #fff;
  text-align: center;
  padding: 20rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: bold;
}
.course-description, .course-outline, .comments-section {
  margin-bottom: 40rpx;
}
.desc-title, .outline-title, .comments-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.desc-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.chapter-list {
  background: #f8f9fa;
  border-radius: 15rpx;
  overflow: hidden;
}
.chapter-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #e9ecef;
}
.chapter-item:last-child {
  border-bottom: none;
}
.chapter-number {
  width: 50rpx;
  height: 50rpx;
  background: #ff6b35;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}
.chapter-title {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.chapter-duration {
  font-size: 24rpx;
  color: #999;
}
.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}
.add-comment {
  font-size: 26rpx;
  color: #ff6b35;
}
.comment-preview {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}
.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.comment-content {
  flex: 1;
}
.comment-user {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.comment-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8rpx;
}
.comment-time {
  font-size: 22rpx;
  color: #999;
}
.view-all-comments {
  display: block;
  text-align: center;
  font-size: 26rpx;
  color: #ff6b35;
  padding: 20rpx 0;
}
</style>
